<template>
  <div class="left-bar" :class="leftBarClass">
    <LeftBarCloseVue v-show="sideBarState === 'close'" />
    <LeftBarOpenVue :style="leftBarOpenStyle" />
  </div>
</template>

<script>
import LeftBarCloseVue from './LeftBarClose.vue'
import LeftBarOpenVue from './LeftBarOpen.vue'

export default {
  name: 'LeftBar',

  components: { LeftBarCloseVue, LeftBarOpenVue },

  computed: {
    sideBarState() {
      return this.$store.state.index.sideBarState
    },

    leftBarClass() {
      return this.sideBarState
    },

    leftBarOpenStyle() {
      if (this.sideBarState === 'close') {
        return {
          // opacity: 0,
          display: 'none'
        }
      } else {
        return {
          display: 'block'
          // opacity: 1,
          // transition: 'opacity 3s'
        }
      }
    }
  }
}
</script>

<style lang="less">
@import './leftBar.less';
</style>
